<template>
    <ul class="group-sort">
        <li 
            class="clear" 
            v-for="(item,key) in sortList" 
            :key="key"
            draggable="true"
            @dragstart.stop="dragStart(item.id,$event)" 
            @dragend.stop="dragend" 
            @dragover.prevent.stop="dragover(item.id,$event)" 
            :draggable="draggable && item.id!==1">
            <span class="fl">{{key+1}}</span>
            <img 
                v-if="item.id!==1"
                class="fr"
                @mousedown="draggable=true"
                @mouseup="draggable=false"
                draggable="false"
                :src="iconDrag(item.id)"
                alt="排序图标" />
            <p>{{item.name}}</p>
        </li>
    </ul>
</template>

<script type="text/javascript">
    export default {
        props:['sortList'],
        data(){
            return {
                // list:[],   // 审批数据列表
                // sortList:[],   // 用于排序
                draggable:false,    // 是否可拖拽
                dragId:null,   // 当前被拖拽对象所在数组的索引值
                dropId:null,   // 当前被拖拽对象所hover的元素所在数组的索引值
            }
        },
        created(){

        },
        computed:{
            iconDrag(){
                return function(status){
                    if(status==this.dragId){
                        return '../../../../static/image/examine/drag2.png';
                    }else{
                        return '../../../../static/image/examine/drag.png';
                    }
                }
            }
        },  
        methods:{
            // 获取轮播文章列表
            // getGroupList(){
            //     var listParam = {
            //         // type:1,     // 1：轮播文章；2：普通文章
            //         // data_type:0,     // 0：没有分页 ； 1：有分页
            //         // order:'time'     // time：创建时间倒序（适用于后台列表）；top：置顶倒序（适用于前台列表）
            //     }

            //     // 显示加载动画
            //     let success = (res=>{
            //         this.list = res.data;
            //         this.sortList = res.data;
            //     })
            //     let fail = ( data => {})
            //     //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            //     this.$ajax.get('/api/examine/examineCate',{params: listParam,func:{success:success,fail:fail}})
            // },
            // 赋予可拖拽的方法
            dragStart(id,e){
                this.dragId = id;
                e.dataTransfer.setData('moveId',id)
            },
            dragover(id,e){
                // 若id==1(其他)的时候不能有排序操作
                if(id===1){
                    e.dataTransfer.dropEffect = 'none'
                    return
                }

                // 若是当前放置对象没有改变则return
                if(this.dropId == id){
                    return
                }

                this.dropId = id;

                // 若是当前放置对象和被拖拽对象是同一个则return
                if(this.dragId == id){
                    return
                }
                
                this.setSort(this.dragId,this.dropId)
            },
            // 排序方法
            setSort(dragId,dropId){
                // 找出被拖拽的元素和被hover元素的索引值
                var dragIdx,dropIdx;
                this.sortList.forEach((item,idx)=>{
                    if(dragId==item.id){
                        dragIdx = idx;
                    }else if(dropId==item.id){
                        dropIdx = idx;
                    }
                })

                var drapItem = this.sortList.splice(dragIdx,1);
                this.sortList.splice(dropIdx,0,drapItem[0]);
            },
            // 放置事件
            dragend(){
                // var a = e.dataTransfer.getData('moveId');

                // 结束一次拖拽并发送给后端保存
                this.draggable = false;
                this.dragId = null;
                this.dropId = null;

            },
            // 设置新的分组排列(父组件调用)
            setNewSort(){

                let sortArr = this.sortList.map((item,key)=>{
                    return {
                        id:item.id,   // 分组id
                        sort: key+1
                    }
                })

                let listParam = {
                    reorder: sortArr   // 二维数组（所有分组id和对应的位置）（参数事例：$reorder['id']；$reorder['sort']）
                }

                let success = (res=>{
                    if(res.status=='success'){
                        this.$message.success('操作成功');
                        // 更新审批列表信息
                        this.$emit('getListGroup')

                    }else{
                        this.$message.error('操作失败');
                    }
                })

                let fail = ( data => {
                    this.$message.error(data.msg);
                })

                // 发送审批分组排序申请
                this.$ajax.put('/api/examine/reorderExamineCate',listParam,{func:{success:success,fail:fail}})

            }
        }
    }
</script>

<style lang="scss">
    // 分组排列
    .group-sort{
        margin:12px 0 20px;
        height:176px;
        overflow-x:hidden;
        
        // 禁止鼠标选中文字
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
        not supported by any browser */
        li{
            height:34px;
            line-height:34px;
            font-size: 14px;
            color: #000000;
            letter-spacing: 0.13px;
            border:1px solid #DDDDDD;
            border-bottom:0 none;
            &:last-child{
                border-bottom:1px solid #DDDDDD;
            }
            span{
                width:34px;
                height:100%;
                text-align:center;
                background: #F2F2F2;
            }
            p{
                margin:0;
                padding-left:16px;
                height:100%;
                text-align:left;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
            img{
                box-sizing:border-box;
                margin-top:11px;
                margin-right:12px;
                width:14px;
                height:12px;
                cursor:move;
            }
        }
    }
 
</style>